<template>
  <header class="aiseo-home-header">
    <div class="header-main" :style="isMine ?'height: 60px;' : ''">
      <div class="logo" @click="handleClickTo">
       <img src="@/assets/image/logo/navi／logo@2x.png" alt="logo" style="width: 100%;height: 100%;" />
      </div>
      <ul class="home-tab-list" :style="{visibility: isMine? 'hidden' : 'visible'}">
        <li
          class="home-tab-item"
          v-for="(item, index) in homeTabList"
          :key="index"
          :class="{ 'active-tab': item.name === meta.pageName }"
          @click="handleOpenRouter(item)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="login-info" v-if="!cookie">
        <!-- <el-button @click="handleCopy('028-65221233')" class="login">028-65221233</el-button> -->
          <div class="login-regist" @click="goLogin">
          <div><span class="login-text">登录</span> <span>&注册</span></div>
        </div>
        <el-button class="login" @click="goLogin">登录</el-button>
      </div>
       <div v-if="cookie" class="login-info">
        <el-dropdown>
          <div class="user-avatar" style="width: 50px; height: 50px;">
            <img v-if="dialogVisible.userInfo?.headimage && dialogVisible.userInfo?.headimage != ' '" :src="dialogVisible.userInfo?.headimage" alt="User Image" class="profile-image" />
            <img v-else src="@/assets/image/img／defaultAvatar@2x.png" alt="User Image" class="profile-image" />
          </div>
          <template #dropdown>
      <el-dropdown-menu style="background-color: #BCBCBE;border: none;">
         <div style="display: flex;align-items: center;flex-direction: column;justify-content: center;padding: 20px;">
          <div class="user-avatar" style="width: 84px; height: 84px;">
            <img v-if="dialogVisible.userInfo?.headimage && dialogVisible.userInfo?.headimage != ' '" :src="dialogVisible.userInfo?.headimage" alt="User Image" class="profile-image" />
            <img v-else src="@/assets/image/img／defaultAvatar@2x.png" alt="User Image" class="profile-image" />
          </div>
          <div style="margin: 20px 20px 0 20px;font-size:20px;color: #333;font-weight: bold;">{{ dialogVisible.userInfo?.nickname }}</div>
          <div style="display: flex;align-items: center;">
            <div></div>
            <div style="margin: 20px 0;color: #333;font-family: Komu A, Komu A;
font-weight: 400;
font-size: 20px;
color: #2E2F33;">
              {{ dialogVisible.userInfo?.balance }}
                <img height="8px" class="icon-CNY" src="@/assets/image/mine/img／currency／CNY／grey@2x.png" alt />
            </div>
            <div style="margin: 20px 0;font-size:18px;color: #333;"> </div>
          </div>
          <div style="display: flex;align-items: center;cursor: pointer;margin-bottom: 20px;" @click="gomy()">
                <img src="@/assets/image/mine/icon／home／black@2x.png" alt="user" style="width: 24px;height:24px;" />
                <div style="margin-left:5px">个人空间</div>
              </div>
          <div style="display: flex;align-items: center;cursor: pointer;margin-bottom: 20px;" @click="hompMoney()">
                <img src="@/assets/image/mine/icon／topup／black@2x.png" alt="user" style="width: 24px;height:24px;" />
                <div style="margin-left:5px">账号充值</div>
              </div>
         </div>
       


      </el-dropdown-menu>
    </template>
        </el-dropdown>
       
        </div> 
    </div>
  </header>
</template>

<script setup>
import { ref } from "vue";
import { ArrowDown } from '@element-plus/icons-vue'
import { useRoute, useRouter } from "vue-router";
import EventBus from "@/utils/eventBus.js";
import { useStore } from '@/store/index';

const props = defineProps({
  isMine:{
    type: Boolean,
    default: false
  }
});
const dialogVisible = useStore();
console.log("dialogVisible的名下额",dialogVisible)
const  cookie =  ref(null);
if(process.client){
  cookie.value = localStorage.getItem("aiseo-token-info");
}
const hompMoney = () => {
  dialogVisible.setdialogVisible(true);
}
 const gomy = () => {
  router.push("/mine");
 }
const handleCopy = (text) => {
  EventBus.emit('openToastBox', ["已复制到剪切板！", text])
}
const route = useRoute();
const router = useRouter();
const meta = route.meta;
const goLogin = () => {
  router.push("/login");
};


const handleOpenRouter = (item) => {
  router.push(item.router);
};
// const props = defineProps({
//   homeList: {
//     type: Array,
//     default: [],
//   },
// });

const homeTabList = ref([
  {
    name: "首页",
    router: "/",
  },
  {
    name: "文字撰写",
    router: "/writingtext",
  },
  {
    name: "SEO定制",
    router: "/seoCustomer",
  },
  {
    name: "软文推广",
    router: "/softArticlePromotion",
  },
  {
    name: "网站优化",
    router: "/websiteOptimization",

  },
  {
    name: "网站联运",
    router: "/websiteIntermodalTransportation",

  },
  // {
  //   name: "新闻资讯",
  // },
  {
    name: "关于我们",
    router: "/aboutus",
  },
]);
const handleClickTo = () => {
  router.push('/');
  EventBus.emit("clicktoTop");
};
</script>

<style lang="scss" scoped>
  .user-avatar {
        box-sizing: border-box;
        padding: 2px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
        }
      }
.aiseo-home-header {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(50px); /* 应用高斯模糊效果，值越大模糊程度越高 */
  z-index: 9;
  .header-main {
    width: $aiseoHomeWidth;
    height: 80px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    // justify-content: space-between;
    .logo {
      width: 178px;
	  height:80px;
    // transform: scale(0.7);
      cursor: pointer;
      transform: translateX(-35px);
    }
    .home-tab-list {
      margin-left: 166px;
      display: flex;
      align-items: center;
      height: 100%;
      font-size: 18px;
      color: #1a1a1a;
      .home-tab-item {
        width: 96px;
        text-align: center;
        line-height: 80px;
        cursor: pointer;
        position: relative;
        font-family: Alibaba PuHuiTi-Medium;
        font-weight: Medium;
        &:hover{
          color: #e62e3d;
          font-family: Alibaba PuHuiTi-Bold;
          font-weight: bold;
          // &::after {
          //   content: "";
          //   display: inline-block;
          //   width: 100%;
          //   height: 2px;
          //   background-color: #e62e3d;
          //   position: absolute;
          //   left: 0;
          //   bottom: 0;
          // }
        }
      }
      .active-tab {
        color: #e62e3d;
        font-family: Alibaba PuHuiTi-Bold;
        font-weight: bold;
        &::after {
          content: "";
          display: inline-block;
          width: 100%;
          height: 2px;
          background-color: #e62e3d;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }
    }
    .login-info {
      // width: 208px;
      width: 156px;
      height: 49px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      margin-left: 34px;
      .login {
        width: 144px;
        height: 49px;
        border-radius: 40px;
        border: 2px solid #1a1a1a;
        font-family: Alibaba PuHuiTi-Bold;
        font-weight: bold;
        font-size: 18px;
        color: #1a1a1a;
        background: none;
        opacity: 1;
        transition: width 0.5s;
        transition: height 0.5s;
        position: absolute;
      }
      .login-regist {
        position: absolute;
        width: 144px;
        transition: width 0.5s;
        // transition: color 0.2s;

        display: flex;
        // width: 208px;
        // height: 49px;
        padding: 2px 0;
        background: none;
        border-radius: 40px;
        opacity: 0;
        align-items: center;
        justify-content: center;
        color: #1a1a1a;

        & > div {
          width: calc(100% - 8px);
          // height: calc(100% - 8px);
          line-height: 40px;
          border-radius: 40px;
          border: 2px solid #fff;
          font-size: 18px;
          text-align: center;
          .login-text {
            font-size: 24px;
          }
        }
      }
      &:hover {
        .login {
          width: 208px;
          opacity: 0;
        }
        .login-regist {
          opacity: 1;
          width: 208px;
          background: #e62e3d;
          color: #fff;
        }
      }
    }
  }
}
</style>
